<template>
	<view class="container">
		<view class="user"  @click="userShow=true" v-if="type=='L'">
			<view>负责人</view>
			<view style="color: #999999;">{{user.nickname||'请选择负责人'}}</view>
		</view>
		<view class="lins">
			<view>NFC数据</view>
		</view>
		<view class="conter">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				<view class="block" v-for="(item,index) in list" :key="index">
					<view class="b-1" v-if="type=='L'">领</view>
					<view class="b-2" v-if="type=='G'">还</view>
					<view class="b-3">
						<view class="b-3-1">编号:{{item.boxNo}}</view>
						<view class="b-3-2">{{formatTimestamp(item.createTime)}}</view>
					</view>
					<view class="b-4">
						<view >批次号：<span style="color: #AEAEAE;">{{item.batchNumber||''}}</span></view>
						<!-- warehouseId -->
						<view v-if="type=='G'" @click="handleIndex(index)">货位：<span style="color: #AEAEAE;">{{item.warehouseName||'请选择货位'}}</span></view>
						<view v-if="type=='L'" @click="getExistLists(item,index)">货位：<span style="color: #AEAEAE;">{{item.warehouseName||'请选择货位'}}</span></view>
					</view>
					<!-- <view class="b-5" v-if="type=='L'">
						<view @click="handleIndex(index)">货位：{{item.warehouseId||'请选择货位'}}</view>
					</view> -->
				</view>
			</scroll-view>
		</view>
		<view class="personnel">
			<u-button  :loading='loading' :custom-style="customStyleBtn1" @click="submit">确认</u-button>
		</view>
		<!-- 选择仓库 -->
		<u-popup :show="show" round="20rpx" mode="bottom" @close="close">
			<view class="p1A">
				<view class="hwqr-1">仓库货位确认</view>
				<view class="hwqr-2">
					<view class="p1A-1">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Yp1">
							<view v-for="(item,index) in theLeft" :key="index"
								:class="index==leftIndex?'yp-left':'yp-left-active'" @click="handleLeft(item,index)">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
					<view class="p1A-2">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Yp1">
							<view v-for="(item,index) in theRight" :key="index"
								:class="index==rightIndex?'yp-right':'yp-right-active'"
								@click="handleRight(item,index)">{{item.name}}</view>
						</scroll-view>
					</view>
				</view>
				<view class="hwqr-3">
					<view class="hwqr-4" @click="handleWarehouse">确认</view>
				</view>
			</view>
		</u-popup>

		<!-- 填写批次 -->
		<u-popup :show="isBatch" mode="center" round="10rpx" @close="isBatch=false">
			<view class="isb-1">
				<view class="isb-2">填写批次信息</view>
				<view class="isb-3">
					<input type="number" maxlength="10" placeholder="请填写批次号码" placeholder-style="font-size:24rpx"
						style="font-size: 24rpx;" v-model="batchNumber">
				</view>
				<view class="buts" @click="BatchSubmit">确定</view>
			</view>
		</u-popup>
		
		<!-- 用户选择 -->
		<u-picker :show="userShow" :columns="columns" keyName="nickname" @confirm="handleUser" @cancel="userShow = false"></u-picker>
	</view>
</template>

<script>
	import {
		getWarehouse,
		outBox,
		getUser,
		listByIds,
		getExistList
	} from '@/api/store.js'
	export default {
		data() {
			return {
				scrollTop:0,
				batchNumber:'',
				loading:false,
				userShow:false,
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '30rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				isBatch: false, //控制批次的显示和隐藏
				ids: [], //NFC code集合
				type: '', //状态
				moneys: [], //仓库数据
				theLeft: [], //仓库左边列表信息
				theRight: [], //仓库右边列表信息
				rightIndex: 0, //仓库默认下标记录
				leftIndex: 0, //仓库默认下标记录
				show: false, //控制仓库的显示和隐藏
				list: [], //列表数据
				user: {
					userID:'',
					userName:''
				},
				columns: [],
				queryParams:{
					pageNo: 1,//页码
					pageSize: 99,//条数
				},
				subscript:0
			}
		},
		onLoad(option) {
			
			this.getWarehouses()
			this.getUser() //获取人员信息
			
			this.ids = JSON.parse(option.NfcCodes)
			this.getList() //获取列表数据
			this.type = option.type
			// this.type = 'L'
			
		},
		methods: {
			// 获取列表数据
			async getList(){
				let res = await listByIds(this.ids)
				console.log('data123123123123：', res.data);
				this.list = res.data
			},
			// 获取人员信息
			async getUser(){
			 let res= await	getUser(this.queryParams)
			 this.columns.push(res.data.list)
			},
			// 获取仓库货位列表
			async getWarehouses() {
				let queryParams = {
					pageNo: 1,//页码
					pageSize: 99,//条数
				}
				let response = await getWarehouse(queryParams)
				this.moneys = response.data.list
				this.theLeft = response.data.list.filter(item => item.parentId == null)//筛选出仓库数据
				this.theRight = response.data.list.filter(item => item.parentId == this.theLeft[0].id)//默认获取仓库第一个下标的数据
				
			},
			// 选择的货位
			handleRight(items, index) {
				this.rightIndex = index
				console.log('items:', items);
				// isQuantity:'',//数量
				this.list[this.subscript].warehouseName = this.theRight[index].name
				this.list[this.subscript].warehouseId = this.theRight[index].id

			},
			// 点击仓库筛选出来货位
			handleLeft(items, index) {
				this.leftIndex = index
				this.rightIndex = 0
				this.theRight = this.moneys.filter(item => item.parentId == items.id)
				this.list[this.subscript].warehouseName = this.theRight[0].name
				this.list[this.subscript].warehouseId = this.theRight[0].id
			},
			// 点击仓库内确定
			handleWarehouse() {
				//判断当前货位名称是否为空 如果为空则默认获取当前货位的下标0数据
				if(!this.list[this.subscript].warehouseName){ 
					this.list[this.subscript].warehouseName = this.theRight[0].name
					this.list[this.subscript].warehouseId = this.theRight[0].id
				}
				this.show = false
			},
			// 点击列表数据选择仓库
			handleIndex(index) {
				this.subscript = index
				this.show = true
			},
			// 关闭弹窗
			close() {
				this.rightIndex = 0
				this.leftIndex = 0
				this.show = false
			},
			// 填写批次
			handleBatch(index) {
				this.isBatch = true
				console.log('index:', index);
			},
			// 选择用户
			handleUser(val){
				this.userShow = false
				console.log(val.value[0]);
				this.user.userID = val.value[0].id
				this.user.nickname = val.value[0].nickname
			},
			// 提交数据
			async submit(){
				let isRetuen = false
				// 判断是否选择责任人
				if(this.type=='L'){
					if(!this.user.nickname){
						uni.showToast({
							title:'请选择负责人',
							icon:'none'
						})
						return
					}
				}
				
				// 判断仓库是否选择
				for(const item of this.list){
					if(!item.warehouseId){
						uni.showToast({
							title:'请选择货位',
							icon:'none'
						})
						isRetuen = true
						break
					}
				}
				if(isRetuen)return
				this.loading = true
				try {
					let data = this.list.map(item=>{
						return{
							outInBillType:this.type=='G'?1:0,
							logisticsId:item.id,
							warehouseId:item.warehouseId,
							userId:this.type=='G'?'':this.user.userID,
							batchNumber:item.batchNumber
						}
					})
					let res = await outBox(data)
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					this.loading = false
					uni.$off('nfcCodds')
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/work/common/box'
						})
					},1000)
				} catch (error) {
					this.loading = false
				} finally{
					this.loading = false
				}
				console.log('提交数据响应数据:',res);
			},
			BatchSubmit(){
				console.log('点击确定');
				this.list[this.subscript].batchNumber = this.batchNumber
				this.batchNumber = ''
				this.isBatch = false
			},
			formatTimestamp(timestamp) {
			  const date = new Date(timestamp);
			
			  const year = date.getFullYear();
			  const month = String(date.getMonth() + 1).padStart(2, '0');  // 月份从 0 开始，所以要加 1
			  const day = String(date.getDate()).padStart(2, '0');
			  const hours = String(date.getHours()).padStart(2, '0');
			  const minutes = String(date.getMinutes()).padStart(2, '0');
			
			  return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			// 取箱子从接口获取货位 
			async getExistLists(item,index){
				this.subscript = index
				let data={
					productId:item.productSkuId,
					batchNumber:item.batchNumber
				}
				let response = await getExistList(data)
				console.log('获取的数据:',response);
				this.moneys = response.data
				this.theLeft = response.data.filter(item => item.parentId == null)//筛选出仓库数据
				this.theRight = response.data.filter(item => item.parentId == this.theLeft[0].id)//默认获取仓库第一个下标的数据
				this.show = true
			}
		},
		
	}
</script>

<style scoped>
	.user{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 33rpx;
		font-size: 24rpx;
		box-sizing: border-box;
	}
	.personnel {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Bindingpersonnel {
		width: 690rpx;
		height: 90rpx;
		background-color: #177A77;
		border-radius: 90rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.buts {
		width: 50%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #177A77;
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.isb-3 {
		width: 80%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
		margin-top: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.isb-2 {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}

	.isb-1 {
		width: 600rpx;
		height: 250rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 25rpx 0 0 0;
		box-sizing: border-box;
	}

	.hwqr-4 {
		width: 50%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		background-color: #177A77;
		color: #FFFFFF;
		border-radius: 70rpx;
	}

	.hwqr-3 {
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hwqr-2 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}

	.hwqr-1 {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.yp-right {
		width: 100%;
		height: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #177A77;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.yp-right-active {
		width: 100%;
		height: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.yp-left {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #177A77;
		color: #FFFFFF;
	}

	.yp-left-active {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll-Yp1 {
		width: 100%;
		height: 550rpx;
	}

	.p1A-2 {
		width: 80%;
		height: 550rpx;
		font-size: 26rpx;
	}

	.p1A-1 {
		width: 20%;
		height: 550rpx;
		/* border-right: 1rpx solid #999999; */
		background-color: #F3F8F8;
		font-size: 26rpx;
	}

	.p1A {
		width: 100%;
		height: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.b-5 {
		flex: 1;
		height: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		margin-left: 100rpx;
		font-size: 24rpx;
		color: #222222;
	}

	.b-4 {
		flex: 1;
		height: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		margin-left: 100rpx;
		font-size: 24rpx;
		color: #222222;
	}

	.b-3-2 {
		width: 203rpx;
		height: 27rpx;
		font-size: 24rpx;
		color: #AEAEAE;
	}

	.b-3-1 {
		width: 203rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 25rpx;
		color: #222222;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.b-3 {
		margin-left: 21rpx;
		height: 60rpx;
		width: 253rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		/* 	text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap; */
	}

	.b-2 {
		width: 70rpx;
		height: 70rpx;
		background-color: #e7f3f2;
		border-radius: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #177A77;
	}

	.b-1 {
		width: 70rpx;
		height: 70rpx;
		background-color: #177A77;
		border-radius: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.block {
		width: 100%;
		height: 120rpx;
		border-bottom: 1rpx solid #EBEBEB;
		display: flex;
		align-items: center;
		padding: 0 33rpx;
		box-sizing: border-box;
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 360rpx);
	}

	.conter {
		width: 100%;
		height: calc(100vh - 360rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.lins {
		width: 100%;
		height: 80rpx;
		background-color: #F9F9F9;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		padding: 0 33rpx;
		box-sizing: border-box;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
	}
</style>